<template>
  <div class="app-container">
    <el-card style="width: 100%" v-show="false">
      <p class="pinformation">基本信息</p>
      <el-row>
        <el-col :span="8">
          <el-form-item label="方案编号：" prop="projectCode">
            {{ form.projectCode }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="方案名称：" prop="projectName">
            {{ form.projectName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="方案类型：" prop="contractType">
            <dict-tag :options="sys_contract_type" :value="form.contractType" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="委托单位：" prop="wtCustomName">
            {{ form.wtCustomName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="方案开始时间：" prop="planDate">
            {{ form.planDate }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="要求完成时间：" prop="endTime">
            {{ form.endTime }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>
    <el-row :gutter="5">
      <el-col :span="4">
        <el-card>
          <el-input prefix-icon="search" v-model="title" @input="searchEnterClick" clearable></el-input>
          <el-scrollbar :height="height" ref="scrollbarRef">
            <el-tree :data="treeData" :props="defaultProps" :default-expand-all="true" style="width: 100%;"
              @node-click="showTable" node-key="myId" :highlight-current="true" ref="treeRef" />
          </el-scrollbar>
          <el-button @click="handleReloadTemplate">重载模板</el-button>
        </el-card>
      </el-col>
      <el-col :span="20">
        <formList :myId="myId" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { getFillingTreeList, reloadTemplate } from "@/api/cyCheck/localWrite";
import { getProjectForm } from "@/api/project/projectCheck";
import { nextTick } from "vue";
import formList from "./common/formList.vue";
const { proxy } = getCurrentInstance();
const {
  sys_contract_type,
} = proxy.useOrgDict(
  "sys_contract_type",
);
const route = useRoute();
const form = ref({ contract: {} });
const myId = ref("");
const treeData = ref([]);
const title = ref("");

const defaultProps = ref({
  label: "title",
});
const queryJson = ref({
  "62c448cfe4b0b45b3a1dac32": { userStepId: 0, userStatus: 0 },
  "62c448cfe4b0b45b3a1dac31": { userStepId: 0, userStatus: 1 },
  "33Tlwpb2Xhea2hXzq6ocW1": { userStepId: 1, userStatus: 0 },
  "33Tlwpb2Xhea2hXzq6ocW2": { userStepId: 1, userStatus: 1 },
  "62c25e13e4b00285a21ce046": { userStepId: 2, userStatus: 0 },
  "62c25e13e4b00285a21ce047": { userStepId: 2, userStatus: 1 },
});
function getList() {
  getProjectForm(route.query.primaryId).then((res) => {
    form.value = res.data;
  });
  let params = queryJson.value[route.query.status];
  if (!params) return;
  params.primaryId = route.query.primaryId;
  getFillingTreeList(params).then((res) => {
    treeData.value = res.data;
    nextTick(() => {
      proxy.$refs["treeRef"].setCurrentKey(treeData.value[0].children[0]);
      showTable(treeData.value[0].children[0]);
    });
  });
}

function searchEnterClick() {
  let params = queryJson.value[route.query.status];
  if (!params) return;
  params.primaryId = route.query.primaryId;
  params.title = title.value;
  getFillingTreeList(params).then((res) => {
    treeData.value = res.data;
  });
}

function showTable(data) {
  if (typeof data === "string") {
    myId.value = data;
  } else {
    if (data.myId) {
      myId.value = data.myId;
    }
  }
}

function handleReloadTemplate() {
  proxy.$modal.loading("正在重载模版，请稍候...");
  reloadTemplate({ projectId: route.query.primaryId }).then(res => {
    proxy.$modal.msgSuccess("重载模板成功！");
    proxy.$modal.closeLoading();
    getList();
  }).catch(() => {
    proxy.$modal.closeLoading();
  })
}
onMounted(() => {
  nextTick(function () {
    getHeight();
    window.addEventListener("resize", getHeight);
  });
})
onUpdated(() => {
  nextTick(() => {
    getHeight();
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getHeight);
});

const height = ref();

function getHeight() {
  nextTick(() => {
    height.value = proxy.getSubFileHeight(proxy, "scrollbarRef", 60);
  });
}


getList();

</script>

<style scoped lang="scss">
#dataForm:deep(div.sign:hover .cha) {
  display: block !important;
}

#dataForm:deep(td) {
  word-break: break-all !important;
}

#dataForm:deep(.bgcTdr) {
  background-color: #d8fdde;
}

#dataForm:deep(.fixed-head),
#dataForm:deep(.fixed-foot) {
  position: sticky;
  background-color: #eee;
  z-index:1;
}

.contextmenu {
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);

  li {
    margin: 0;
    padding: 7px 16px;
    cursor: pointer;

    &:hover {
      background: #eee;
    }
  }
}

#dataForm:deep(.markColor) {
  background: transparent url("/src/assets/images/report.gif") no-repeat scroll 0 0;
}

:deep(.el-tree-node>.el-tree-node__children) {
  overflow: visible;
}

:deep(.el-tree-node.is-expanded.is-current.is-focusable) {
  overflow: hidden !important;
  display: inline-block !important;
}
</style>
